<template>
<!-- 首页 -->
  <div class="home">
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar class="title" title="易洁家政" />
      </van-sticky>
    </div>
    <!-- 轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="swipe in swipeData"
          :key="swipe.id"
          class="van-swipe-item"
        >
          <img :src="swipe.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid>
      <!-- <van-grid-item icon="orders-o" text="订单"/>
      <van-grid-item icon="service-o" text="收益"/>
      <van-grid-item icon="phone-o" text="帮助" />
      <van-grid-item icon="friends-o" text="我的" /> -->
      <van-grid-item icon="orders-o" text="订单" to="/manager/order" />
      <van-grid-item icon="service-o" text="收益" to="/manager/profit" />
      <van-grid-item icon="phone-o" text="帮助" />
      <van-grid-item icon="friends-o" text="我的" to="/manager/mine" />
    </van-grid>
    <!-- 订单展示 -->
    <div class="content">
      <div
        class="card"
        v-for="order in orderAllData"
        :key="order.id"
        @click="orderDetail(order.orderLines, order.address, order.orderTime,order.status)"
      >
        <div><img :src="order.customer.userFace" alt="" class="img" /></div>
        <div class="item">
          <span class="name">{{ order.customer.username }}</span>
          <span class="status">{{ order.status }}</span>
          <p class="address">
            {{
              order.address.province +
              order.address.city +
              order.address.area +
              order.address.address
            }}
          </p>
          <div class="date">
            <div style="float: left; font-size: 12px">
              {{ order.orderTime | dateFormat }}
            </div>
            <div style="float: right; font-size: 12px">¥{{ order.total }}</div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
import { get, post, post_json } from "@/http/axios";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      //轮播图数据
      swipeData: [],
      index: "",
      orderAllData: [],
      addressData: [],
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
  },
  methods: {
    ...mapActions("category", ["getAllCategoryData"]),
    ...mapActions("product", ["getAllProductData"]),
    ...mapActions("user", ["getUserInfo"]),

    //获取全部的订单数据
    async getAllOrder() {
      let data = {
        page: 1,
        pageSize: 100,
        //employeeId:this.userInfo.id
      };
      let res = await get("/order/pageQuery", data).then((res)=>{
        this.orderAllData = res.data.data.list;
      });
      
    },
    //   获取所有轮播图的数据
    async getAllswipData() {
      let res = await get("/carousel/query", { status: "正常" });
      //console.log(res.data.data);
      this.swipeData = res.data.data;
    },
    // 路由的跳转
    orderDetail(orderAllData, addressData, orderTime,orderstatus) {
      this.$router.push({
        path: "/manager/orderdetail",
        query: {
          orderAllData,
          addressData,
          orderTime,
          orderstatus,
        },
      });
    },
  },
  created() {
    // 自动获取轮播图的数据
    this.getAllswipData();
    // 自动获取全部的订单数据
    this.getAllOrder();
    //获取员工用户的Id
    this.getUserInfo();
    //console.log(this.userInfo);
  },
};
</script>

<style scoped>
.my-swipe {
  width: 80%;
  height: 160px;
  border-radius: 8px;
  margin: 0 auto;
}
.van-swipe-item img {
  width: 100%;
  height: 160px;
  border-radius: 8px;
}
.title {
  /* font-size: 32px;
  font-family: webfont; */

  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

.content .card {
  width: 80%;
  height: 80px;
  margin: 0 auto;
  box-shadow: 0 0 6px 0 #ccc;
  display: flex;
  padding: 1em 1em;
  border-radius: 5px;
  margin-bottom: 20px;

}
.content .card .img {
  width: 80px;
  height: 80px;

  border-radius: 50%;
}
.content .card .item {
  margin-left: 1em;
  flex: 2;
  height: 80px;
}
.content .card .status {
  float: right;
  font-size: 11px;
  color: #f8825d;
}
.content .card .address {
  font-size: 12px;
  margin-top: 1em;
  color: #666;
}
</style>